@import "base/reset.less";
@import "base/variables.less";
@import "base/mixins.less";
@import "base/forms.less";
@import "base/tables.less";
@import "base/typography.less";
@import "base/layout.less";

/* Layout elements */
@import "components/nav.less";
@import "components/footer.less";

/* Common components */
@import "components/accordion.less";
@import "components/admin.less";
@import "components/code.less";
@import "components/message.less";
@import "components/pagination.less";
@import "components/panel.less";
@import "components/simplebox.less";
@import "components/select.less";
@import "components/sumo_link.less";
@import "components/table_sorter.less";
@import "components/tree.less";

/* Other shared styles */
a {
    text-decoration: none;
    &,
    &:link,
    &:hover,
    &:active {
        color: @blue;
        text-decoration: underline;
    }

    .ui-widget-content &:visited, /* Override jQuery UI's behavior */
    &:visited {
        color: @purple;
    }
}

body > h1 {
    font-size: 200%;
}

.clear {
    clear: both;
}
.clear_left {
    clear: left;
}
.clear_right {
    clear: right;
}
.float_left {
    float: left;
}
.float_right {
    float: right;
}
.hidden {
    display: none;
}
.visually-hidden {
    .accessibly-hidden()
}
time {
    display: inline-block;
}

#mainbody {
    position: relative;
    margin: 1em 2em;
    text-align: left;
    flex: 1;
}
.loading {
    position: absolute;
    top: 45%;
    left: 45%;
}
.inline-loader {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
.logout-form {
    display: inline;
}
button.sign-out-button {
    background: none;
    color: @blue-60;
    font-size: @base-font-size;
    padding: 0;

    &:hover {
        background: none;
        text-decoration: underline;
    }
}

/* --- */
// #NOTE(amikulski): Below this line are the elements I could not verify exist on the site, and will
// eventually be removed in a later PR after ensuring they really don't exist anywhere.
/* --- */
#data_sources {
    border: 0;
    table {
        width: 100%;
    }
    th:last-child {
        width: 80px;
    }
}

#data_sources_nav {
    background: none;
    border: 0;
    li {
        background: none;
        border: 0;
    }
    li:before {
        content: "";
    }
}

span.push_right {
    margin-right: 10px;
}

.list {
    tr:nth-child(2n+1) {
        background-color: @off-white;
    }
    tr:nth-child(2n) {
        background-color: @white;
    }
    tr:hover {
        background-color: @white;
    }
    tr {
        td {
            padding:.5em;
            text-align:left;
            label {
                border-bottom: 1px dashed @grey;
                font-weight: normal;
            }
        }
    }
    th {
        background: @off-white;
        padding: 2px;
        border: 1px solid @black;
        font-weight: bold;
        a {
            display: block;
            padding:.2em 1.2em .2em .2em;
            text-align: left;
        }
        a:hover {
            background-color: @white;
        }
    }
}

.oopp-hang {
    clear: right;
    float: right;
    .current {
        float: right;
        background-image: url("@{image-path}/3rdparty/fatcow/stop16x16.png");
        background-repeat: no-repeat;
        color: @red;
        padding-left: 20px;
        height: 16px;
        font-weight: 900;
        .type {
            color: @dark-grey;
        }
    }
    .pair {
        clear: right;
        padding: 0.5em 0 0.5em 0.5em;
        a {
            text-decoration: none;
        }
    }
}

td.in1,
td.in2 {
    ul {
        padding-left: 15px;
    }
}

.trend {
    font-weight: 900;
    color: @white;
}
.trend.up {
    background: url("@{image-path}/up_arrow.png") no-repeat scroll right 10px @red;
}
.trend.down {
    background: url("@{image-path}/down_arrow.png") no-repeat scroll right 10px @green;
}

.complete {
    position: absolute;
    right: 0px;
    background-color: @white;
    border: solid 1px @grey;
    margin: 1em;
}

.correlation-module {
    position: relative;
    float: left;
    padding: 1em;
    width: 320px;
    h3 {
        font-weight: bold;
    }
}
#duration-nav {
    float: right;
    ul {
        li {
            float: left;
            padding-right: 1em;
            list-style-type: none;
        }
    }
}

div.expandable-menu,
div.each-sparkline {
    margin-left: 12px;
    border: none;
}
.correlation-cell {
    div {
        div.complete {
            display: none;
        }
    }
}
.correlation {
    pre {
        clear: left;
    }
    h3 {
        margin-top: 0.1em;
    }
}
.complete {
    h3 {
        margin: 0.75em 0 0 0;
    }
}

/* jQueryUI theme overrides */
.ui-tabs-panel {
    border: 1px solid @off-white;
}

